<template>
  <div class="index">
    <div class="head">
      <van-nav-bar title="品质90+" />
    </div>
    <div class="main">
      <div class="search" background="rgba(255,255,255,0.1)">
      </div>
      <div class="list">
        <van-row type="flex" justify="center">
          <van-col span="6" @click="tiao('/NPSlistDetails')">
            <van-icon
              name="chart-trending-o"
              color="rgba(42, 131, 78, 1)"
              size="24"
            />
            <br />
            <span>口碑榜单</span>
          </van-col>
          <van-col span="6" @click="tiao('/shenzhen')">
            <van-icon name="apps-o" color="rgba(42, 131, 78, 1)" size="24" />
            <br />
            <span>志愿者活动</span>
          </van-col>
          <van-col span="6" @click="tiao('/qualityList')">
            <van-icon name="flower-o" color="rgba(42, 131, 78, 1)" size="24" />
            <br />
            <span>品质榜单</span>
          </van-col>
        </van-row>
      </div>
      <div class="main_list">
        <van-divider
          :style="{
            color: 'rgba(42, 131, 78, 1)',
            borderColor: 'rgba(42, 131, 78, 1)',
          }"
          >品质榜单
        </van-divider>
        <p>中国好品质，由你来决定</p>
        <div class="charts">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="item in tableData"
              :key="item.id"
              class="van_grid_item"
              @click="tiaozhuan(item.id)"
            >
              <van-image :src="item.img" />
              <div class="div_title_item">
                  <p class="div_title_p">{{ item.title }}</p>
                   <div class="div_title_span1">{{ item.text }}</div>
                  <span class="div_title_span2">折后参考价</span>
                <i class="div_prices">{{ item.price }}</i>
                <i class="div_pricess">{{ item.prices }}</i>
                <span class="div_red">
                  <van-icon name="shopping-cart-o" />
                  </span>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "../../components/Footer/footer.vue";
import {addGoods} from '../../api/index'
export default {
  name: "",
  data() {
    return {
      value: "",
      active: "",
      tableData: [
        // {
        //   id: 1,
        //   // 图片地址
        //   src: "https://img01.yzcdn.cn/vant/apple-1.jpg",
        //   //商品名称
        //   title: "肉香四溢 香辣更过瘾",
        //   //  商品介绍
        //   text: "这是一只木有表情",
        //   // 商品价格
        //   price: 78,
        //   prices: 5,
        // },
      ],
    };
  },
  components: {
    Footer,
  },
  created(){
    this.getdata();
  },
methods: {
    // 商品数据渲染
   async getdata(){
    let obj = {
      category:"",
      pagenum:1,
      pagesize:8
    }
    let {data:{result:{result}},meta:{status}} = await addGoods(obj);
    if(status == 200){
      this.tableData = result
    }
   },
    // 回到顶部
    returnTop() {
      window.scrollTo(0, 0);
    },
    // 跳转
    tiao(value) {
      this.$router.push({ path: value }).catch((error) => error);
    },
     tiaozhuan(id){
      window.localStorage.setItem("id",id)
      this.$router.push({path:`/Shops/`}).catch(error=>error)
    }
  },
  filters: {},
};
</script>

<style scoped lang='less'>
body,
html {
  .index {
    .head {
      /deep/.van-nav-bar .van-icon {
        color: silver;
      }
    }
    .main {
      .search {
        height: 213px;
        background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi4%2F619123122%2FTB2mA4BXIz85uJjSZFoXXXjcpXa_%21%21619123122.jpg_640x640.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642682156&t=9a82733631c58964c37c629ba72b2967)
          no-repeat 100%;
      }
      .list {
        height: 89px;
        width: 375px;
       
        .van-row {
          .van-col {
            margin: 19px 10px;
            text-align: center;
            font-size: 14px;
          }
        }
      }
      .main_list {
        margin-top: 25px;
        .van-divider {
          font-size: 16px;
          width: 375px;
          padding: 0;
          margin: 0 auto;
        }
        p {
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
          text-align: center;
        }
      }
      .charts {
        padding: 5px;
        .van_grid_item {
          
          .div_title_item{
            
            margin-left:-5px;
            .div_title_p{
              padding: 0;
              margin: 0;
              color: black;
              font-size: 16px;
              font-weight: bold;
              text-align: left;
            }
          }
          .div_title_span1{
            font-size: 8px;
           
          }
           .div_title_span2{
            font-size: 12px;
            margin-right:2px;
            position: relative;
            
          }
          .div_title_span2::after{
              content: "￥";
              position: absolute;
              
             
              top: -16px;
              right: -2px;
              display: inline-block;
              font-size: 14px;
              color: red;
            }
          .div_prices{
            font-size: 28px;
            font-weight:bold;
              color: red;
          }
          .div_pricess{
            font-size: 16px;
              color: red;
          }
          .div_red{
            font-size:25px ;
            margin-left: 3px;
            color: red;
          }
        }
      }
    }
  }
}
</style>